<template>
  <div class="app-container">
    <div class="pages-title">中国医学科学院整形外科医院AICU监护记录单</div>
    <div class="pages-top">
      <div class="top-item">
        <div class="item-key">AICU床号：</div>
        <div class="item-value">{{ userInfo.bedCode }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">姓名：</div>
        <div class="item-value">{{ userInfo.patientName }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">性别：</div>
        <div class="item-value">{{ userInfo.sex }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">年龄：</div>
        <div class="item-value">{{ userInfo.age }}岁</div>
      </div>
      <div class="top-item">
        <div class="item-key">体重：</div>
        <div class="item-value">{{ userInfo.weight }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">病案号:</div>
        <div class="item-value">{{ userInfo.mrn }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">科室：</div>
        <div class="item-value">{{ userInfo.departmentName }}</div>
      </div>
    </div>
    <div class="pages-top">
      <div class="top-item">
        <div class="item-key">诊断：</div>
        <div class="item-value">
          {{ userInfo.diagnosis }}
        </div>
      </div>
      <div class="top-item">
        <div class="item-key">入AICU时间：</div>
        <div class="item-value">{{ userInfo.accessTime }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">出AICU时间：</div>
        <div class="item-value">{{ userInfo.leaveTime }}</div>
      </div>
      <div class="top-item">
        <div class="item-key">麻醉医生：</div>
        <div class="item-value">{{ userInfo.anesthetist }}</div>
      </div>
    </div>
    <div class="pages-content">
      <div class="table-content">
        <div class="tr-table">
          <div class="timer-box">
            <div class="timer-left"></div>
            <div class="timerTabList">
              <div
                class="timerTabList-item"
                style="
                  border-left: 1px solid #000;
                  border-bottom: 1px solid #000;
                "
              >
                2023-10-10
              </div>
              <div class="timerTabList-item">
                <div
                  v-for="item in timerTabList"
                  :key="item"
                  class="timer-item"
                >
                  {{ item }}
                </div>
              </div>
            </div>
          </div>

          <div
            class="physical"
            style="border-left: 1px solid #000; border-bottom: 1px solid #000"
          >
            <div class="title-left" style="width: 127px">入量ml</div>
            <div class="list-box">
              <div style="display: flex">
                <div
                  class="physical-list"
                  v-for="(item, index) in icrIntakeTabList"
                  :key="index"
                >
                  <!-- <div class="item-title1">{{ item.title }}</div> -->
                  <div class="item-value1">
                    <div class="itemNum" v-if="item.num">{{ item.num }}</div>
                  </div>
                  <div class="item-value1">
                    {{ item.intakeNumber }}
                  </div>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="physical"
            style="border-left: 1px solid #000; border-bottom: 1px solid #000"
          >
            <div class="title-left">出量ml</div>
            <div class="physical-list">
              <div
                class="table-box"
                v-for="(item, index) in icrOutputBos"
                :key="index"
              >
                <div class="item-title1">{{ item.outPutName }}</div>
                <div
                  v-for="(item1, index1) in outPutList"
                  :key="index1"
                  class="item-value"
                >
                  <div
                    v-for="(item2, index) in item.icrOutPutDetails"
                    :key="index"
                  >
                    <div v-if="item1.timer == item2.getHours">
                      {{ item2.intakeNumber }}
                    </div>
                  </div>
                </div>
                <div class="clear"></div>
              </div>
            </div>
          </div>
          <div class="table-cont"></div>
          <div class="table-cont"></div>

          <div
            class="physical"
            style="border-left: 1px solid #000; border-bottom: 1px solid #000"
          >
            <div class="title-left">评分</div>

            <div class="list-box">
              <div style="display: flex">
                <div
                  class="physical-list"
                  v-for="(item, index) in scoreResultValueBos1"
                  :key="index"
                >
                  <!-- <div class="item-title1">{{ item.title }}</div> -->
                  <div class="item-value1" style="width: 96px">
                    {{ item.scoreName }}
                  </div>
                  <div
                    class="item-value1"
                    style="width: 96px"
                    v-if="item.scoreValue"
                  >
                    {{ item.getHours }}/{{ item.scoreValue }}
                  </div>
                  <div class="item-value1" style="width: 96px" v-else></div>
                  <div class="clear"></div>
                </div>
              </div>
              <div style="display: flex">
                <div
                  class="physical-list"
                  v-for="(item, index) in scoreResultValueBos2"
                  :key="index"
                >
                  <!-- <div class="item-title1">{{ item.title }}</div> -->
                  <div class="item-value1" style="width: 96px">
                    {{ item.scoreName }}
                  </div>
                  <div
                    class="item-value1"
                    style="width: 96px"
                    v-if="item.scoreValue"
                  >
                    {{ item.getHours }}/{{ item.scoreValue }}
                  </div>
                  <div class="item-value1" style="width: 96px" v-else></div>
                  <div class="clear"></div>
                </div>
              </div>
              <div style="display: flex">
                <div
                  class="physical-list"
                  v-for="(item, index) in timerList"
                  :key="index"
                >
                  <div class="item-value1" style="width: 96px"></div>
                  <div class="clear"></div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="physical"
            style="
              border-left: 1px solid #000;
              border-bottom: 1px solid #000;
              height: 58px;
            "
          >
            <div
              class="title-left"
              style="border-right: 1px solid #000; height: 58px"
            >
              接班
            </div>
            <div class="physical-list">
              <div class="table-box">
                {{ icrShiftRecordBos.shiftRecordOff }}
              </div>
            </div>
          </div>
          <div
            class="physical"
            style="
              border-left: 1px solid #000;
              border-bottom: 1px solid #000;
              height: 56px;
            "
          >
            <div
              class="title-left"
              style="border-right: 1px solid #000; height: 56px"
            >
              交班
            </div>
            <div class="physical-list">
              <div class="table-box">
                {{ icrShiftRecordBos.shiftRecordOn }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-left">
        <div class="left-title">治疗</div>
        <div class="left-content">
          <div v-for="(item, index) in icrIntakeTabList" :key="index">
            <div v-if="item.getHours" class="desc">
              {{ item.getHours }} {{ item.desc }}
            </div>
          </div>
        </div>
      </div>
      <div class="table-left">
        <div class="left-title">治疗</div>
        <div class="left-content"></div>
      </div>
    </div>
    <div class="page-bottm">
      <div>交接班内容：（管路，皮肤）</div>
      <div class="bottm-item">
        护士签名：
        <img
          :src="'data:image/png;base64,' + signRecordBos.img"
          alt=""
          style="width: 70px; height: 20px"
          v-if="signRecordBos.img"
        />
        <!-- <div class="bottom-value"></div>q -->
      </div>
    </div>
  </div>
</template>

<script>
import {
  recordList,
  ventilateList,
  recordList1,
  icrIntakeList,
  outPutList,
} from "@/utils/constant.js";
import indexMiXin from "../../mixin/index";

export default {
  mixins: [indexMiXin],

  props: {
    timerList1: {
      type: Array,
    },
  },
  data() {
    return {
      timerTabList: [],
      vitalList: recordList,
      ventilateLists: ventilateList,
      recordList2: recordList1,
      timerList: ["", "", "", "", "", "", ""],
      bb: [
        {
          title: "Caprini评分",
          timerList: ["", "", "", "", "", ""],
        },
        {
          title: "10:57/6",
          timerList: ["", "", "", "", "", ""],
        },
        {
          title: "",
          timerList: ["", "", "", "", "", ""],
        },
        {
          title: "",
          timerList: ["", "", "", "", "", ""],
        },
      ],

      icrIntakeTabList: [],
      icrOutputBos: [],
      outPutList: outPutList,
      scoreResultValueBos1: [],
      scoreResultValueBos2: [],
    };
  },
  created() {
    this.timerTabList = this.timerList1;
    this.getUseINfo();
    let params = {
      patientNumber: 629149559,
      // baseBeginTime: "2023-04-26 00:00:00",
      // baseEndTime: "2023-04-26 23:59:59",
      baseBeginTime: "2023-04-26 09:00:00",
      baseEndTime: "2023-04-26 20:59:59",
    };
    this.getList(params).then((res) => {
      let {
        icrIntakeBos,
        icrOutputBos,
        scoreResultValueBos,
        icrShiftRecordBos,
        signRecordBos,
      } = res;
      /**
       * icrIntakeBos 入量
       * icrOutputBos 出量
       * scoreResultValueBos 评分
       * icrShiftRecordBos 交接班
       * signRecordBos 签名
       */
      signRecordBos.forEach((item) => {
        if (item.shift == "白班") {
          this.signRecordBos = item;
        }
      });
      icrIntakeBos = this.setHour(icrIntakeBos, "createdt");
      let arr = [];
      icrOutputBos.forEach((item) => {
        item.icrOutPutDetails = this.setHour(item.icrOutPutDetails, "createdt");
      });
      //出量处理
      if (icrOutputBos.length < 10) {
        for (let i = icrOutputBos.length; i < 10; i++) {
          icrOutputBos.push({
            outPutName: "",
            icrOutPutDetails: [],
          });
        }
      }
      this.icrOutputBos = icrOutputBos;

      //入量处理
      icrIntakeList.forEach((item) => {
        icrIntakeBos.forEach((item1) => {
          if (item.timer == item1.getHours) {
            item.num = item1.count;
            item.intakeNumber = item1.intakeNumber;
            item.desc = item1.desc;
            item.getHours = item1.getHours;
          }
        });
      });
      this.icrIntakeTabList = icrIntakeList;

      //评分处理
      scoreResultValueBos = this.setHour(scoreResultValueBos, "operateTime");
      console.log(scoreResultValueBos, "--scoreResultValueBos1--");

      let scoreResultValueBos1 = [];
      let scoreResultValueBos2 = [];
      if (scoreResultValueBos.length > 7) {
        scoreResultValueBos1 = scoreResultValueBos.slice(0, 6);
        scoreResultValueBos2 = scoreResultValueBos.slice(7, 12);
      } else {
        scoreResultValueBos1 = scoreResultValueBos.slice(0, 6);
        scoreResultValueBos2 = [{}, {}, {}, {}, {}, {}, {}];
      }
      if (scoreResultValueBos1.length < 7) {
        for (let i = scoreResultValueBos1.length; i < 7; i++) {
          scoreResultValueBos1.push({});
        }
      }
      this.scoreResultValueBos1 = scoreResultValueBos1;
      this.scoreResultValueBos2 = scoreResultValueBos2;
      //交接班
      this.icrShiftRecordBos =
        icrShiftRecordBos && icrShiftRecordBos.length > 0
          ? icrShiftRecordBos[0]
          : {};
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
table {
  border-collapse: collapse;
  border: 1px solid gray;
  word-break: break-all;
}
div {
  font-size: 12px;
}
td {
  border: 1px solid gray;
  height: 19.91px;
  border-left: none;
}
.itemNum {
  width: 15px;
  height: 15px;
  border: 1px solid #000;
  border-radius: 50%;
  padding: 2px;
  display: inline-block;
  align-items: center;
  justify-content: center;
}
.desc {
  display: flex;
  align-items: center;
}
.app-container {
  .pages-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 20px;
  }
  .pages-top {
    display: flex;
    align-items: flex-end;

    font-size: 18px;
    margin-bottom: 20px;
    .top-item {
      display: flex;
      align-items: flex-end;
      margin-right: 40px;
      .item-key {
        font-weight: 600;
      }
      .item-value {
        max-width: 520px;
        min-width: 100px;
        padding: 0 10px;
        border-bottom: 1px solid #000;
      }
    }
  }
  .pages-content {
    display: flex;
    align-items: flex-start;
    .table-content {
      display: flex;

      .tr-table {
        display: flex;
        flex-direction: column;
        border-top: 1px solid #000;
        .timer-box {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #000;
          border-left: 1px solid #000;
          .timer-left {
            width: 127px;
          }

          .timerTabList {
            display: flex;
            flex-direction: column;
            align-items: center;
            .timerTabList-item {
              display: flex;
              align-items: center;
              justify-content: center;
              border-right: none;
              width: 100%;
              .timer-item {
                width: 48px;
                height: 18px;
                border-left: 1px solid #000;
                text-align: center;
              }
            }
          }
        }

        .physical {
          display: flex;
          align-items: center;

          .title-left {
            width: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .physical-list {
            display: flex;
            flex-direction: column;
            flex: 1;
            .table-box {
              display: flex;
              div {
                float: left;
              }
              .item-title {
                text-align: center;
                width: 128px;
                height: 20px;
                border-bottom: 1px solid #000;
                border-left: 1px solid #000;
                word-wrap: break-word;
                line-height: 20px;
              }
              .item-title1 {
                text-align: center;
                width: 97px;
                height: 20px;
                border-bottom: 1px solid #000;
                border-left: 1px solid #000;
                word-wrap: break-word;
                line-height: 20px;
              }
              .item-value {
                text-align: center;
                width: 48px;
                height: 20px;
                border-left: 1px solid #000;
                border-bottom: 1px solid #000;
                word-break: break-word;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 12px;
              }
            }
            .clear {
              clear: both;
            }
          }
          .list-box {
            display: flex;
            flex-direction: column;
            .physical-list {
              display: flex;
              flex-direction: column;
              flex: 1;
              .clear {
                clear: both;
              }
              .item-value1 {
                text-align: center;
                width: 48px;
                height: 20px;
                border-left: 1px solid #000;
                border-bottom: 1px solid #000;
                word-break: break-word;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 12px;
                .itemNum {
                  width: 15px;
                  height: 15px;
                  border: 1px solid #000;
                  border-radius: 50%;
                  padding: 2px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
          }
        }
        .table-cont {
          width: 100%;
          height: 25px;
          border-left: 1px solid #000;
          border-bottom: 1px solid #000;
        }
      }
    }
    .table-left {
      width: 100%;
      border: 1px solid #000;
      border-right: none;

      border-left: none;
      .left-title {
        width: 100%;
        text-align: center;
        height: 14px;
      }
      .left-content {
        height: 526px;
        border: 1px solid #000;
      }
    }
  }
  .page-bottm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    .bottm-item {
      display: flex;
      .bottom-value {
        max-width: 520px;
        min-width: 100px;
        padding: 0 10px;
        border-bottom: 1px solid #000;
      }
    }
  }
}
</style>
